<template>
<ul>
  <li v-for="(item, index) in shoplist" :key="index"><img src="./img/1.jpg"/>
  <p>adidas阿迪达斯男士场下休闲篮球鞋S83700</p>
    <span class="text-red">￥{{item.originalCost}}.00</span><span class="text-none">￥{{item.currentprice}}</span>
    <p><router-link to="/purchase" class="mint-button mint-button--primary mint-button--normal">立即购买</router-link></p>
  </li>
</ul>
</template>

<script>
export default {
  data() {
    return {
      shoplist:[{
        originalCost:560,
        currentprice:1888
      },{
        originalCost:520,
        currentprice:2888
      },{
        originalCost:512,
        currentprice:2988
      },{
        originalCost:360,
        currentprice:8788
      },{
        originalCost:5160,
        currentprice:6888
      },{
        originalCost:160,
        currentprice:3888
      },{
        originalCost:360,
        currentprice:888
      }]
    }
  },mounted() {
      
  },methods: {
  }
}
</script>

<style scoped>
ul{
  width:98%;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
}
li{
  float:left;
  text-align:center;
  width:48%;
  margin:1%;
  height:auto;
  box-shadow: 0 4px 6px #888888;
  font-size:15px;
}
img{
  width:100%; 
  height:auto;
}
.text-red{
  color:red;
  line-height:40px;
}
.text-none{
  text-decoration:line-through;
  line-height:40px;

}
a{  
    display: line-block;
    height: 40px;
    line-height:40px;
    text-decoration: none;
}
a:hover{
    color: #fff;
    text-decoration: none;
    
}
</style>
